.prettyprint {
  background: #eee;
  // font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
  /* Put a border around prettyprinted code snippets. */
  // pre.prettyprint { padding: 2px; border: 1px solid #888 }
  overflow: auto;
  a {
    text-decoration: none;
    background: rgba(255,255,255,0.8);
    padding:2px 3px;
    border-radius: 4px;
  }
  &::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.26);
  }
}

.prettify-filename {
  position: relative;
  text-align: right;
  margin-right: $font-size-base;
  margin-top: -$font-size-base * 2.5;
  margin-bottom: $font-size-base;
  opacity: 0.5;
}

/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #222 }  /* plain text */

@media screen {
  .str { color: $blue }  /* string content */
  .kwd { color: $teal }  /* a keyword */
  .com { color: #999999 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #222 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

pre.linenums { padding: 2px; }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #cccccc; } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { padding-left: 1em; background-color: #fff; list-style-type: decimal; }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background-color: #fefefe; }

//
// Rouge / pygments classes (https://github.com/jneen/rouge)
//

$generic-output-color: white;

@mixin console-base($color: $light-green-A700) {
  background: $grey-900;
  color: $color;
}

.language-console .highlight {
  @include console-base;
}

pre.console-output {
  @include console-base($generic-output-color)
}

// `terminal` is like `console` with prompts and output colored differently
.language-terminal .highlight {
  @include console-base;
  .gp { color: $grey-500; } /* Generic.Prompt */
  .nb { color: $light-green-600; } /* Name.Builtin */
  .go { color: $generic-output-color; } /* Generic.Output */
}

// Match prettifier classes defined above.
// TODO: complete this to get proper highlighting for Dart under Rouge.
.highlight {
  .s, .s1, .s2 { @extend .str; } /* Literal.String.* */
  .k, .kc, .kd, .kn, .kp, .kr, .kt { @extend .kwd; } /* Keyword.* */
  .p { @extend .pun; } /* Punctuation */
  .c, .c1, .cm { @extend .com; } /* Comment */
  .l { @extend .lit; } /* Literal */
  .o { @extend .opn; } /* Operator */
  .n { @extend .typ; } /* Name */
}
